<!-- <template>
  <div>
    <el-table
    :data="
      arr.filter(
        (arr) =>
          !search || arr.name.toLowerCase().includes(search.toLowerCase())
      )" style="width: 100%"
    />
    
    <el-table-column label="id" prop="id">
        <template slot-scope="scope">
				     <input type="text" v-model="scope.row.id" readonly> 
				 </template>
         </el-table-column>
    <el-table-column label="head" prop="touxiang">
      <template slot-scope="scope">
          <div>

          <input type="file" @change="fn" class="touxiangbox">
        <img class="touxiang" :src="suburl + scope.row.touxiang" />
         </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" prop="name">
        <template slot-scope="scope">
				     <input type="text" v-model="scope.row.name" :readonly="isreadonly" @dblclick="dbbtn"  class="inputbtn">
				 </template>
        
         </el-table-column>
    <el-table-column label="Email" prop="email">
        <template slot-scope="scope">
				     <input type="text" v-model="scope.row.email" :readonly="isreadonly" @dblclick="dbbtn">
				 </template>
         </el-table-column>
          <el-table-column label="pwd" prop="pwd">
        <template slot-scope="scope">
				     <input type="text" v-model="scope.row.pwd" :readonly="isreadonly" @dblclick="dbbtn">
				 </template>
         </el-table-column>
    <el-table-column align="right">
      <template slot="header" slot-scope="scope">
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </div>
  </template>
  
  <script lang="ts">
    export default {
  data() {
    return {
      arr: [],
      search: "",
      touxiangdata:"",
      isreadonly:true
    };
  },
  methods: {
    dbbtn(){
      this.isreadonly=false
      console.log(1111111111111,this.isreadonly)
    },
      fn(e){
          console.log(e.target.files[0])
         this.touxiang=window.URL.createObjectURL(e.target.files[0])
         this.touxiangdata=e.target.files[0]
      },
   async handleEdit(index, row) {
    let res1=await this.$axios("updatedata",{params:{...row}})
    console.log(res1.data)

    //   console.log(index, row);
    },
   async handleDelete(index, row) {
       let res2=await this.$axios("deldata",{params:{id:row.id}})
       if(res2.data.affectedRows==1){
           this.arr.splice(index,1)
       }
       console.log(res2.data)
    //   console.log(index, row);
    },
  },
  async mounted() {
    let res = await this.$axios("getuser");
    console.log(res.data);
    this.arr = res.data;

  },
};
  </script>
  
  <style scoped>
  input{
  outline: none;
  border: 0px;
}
.touxiang {
  width: 60px;
}
.touxiangbox{
    opacity: 0;
}
  </style> -->